<template>
  <div style="width:100%;height:100%; background-color: white;">
    <span>
      <!-- 前端页面导入文件的入口 -->
      <input class="input-file" type="file" @change="exportData"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
      <button @click="btnClick">导入EXCEL</button>
    </span>
    <!-- 导入文件后需要渲染的表格 -->
    <!-- 表格组件 -->
    <div class="myTable">
      <!-- <el-table max-height="600" :data="dataArr" v-loading="tableLoading" border style="width: 100%">
        <el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="(item, i) in tableColumn"
          :key="i"></el-table-column>
      </el-table> -->
      <!-- <el-tree :data="dataArr" :props="defaultProps"></el-tree> -->
      <vue2-org-tree :data="dataArr" />
    </div>
  </div>
</template>
 
<script>
// import XLSX from 'xlsx'
import * as xlsx from 'xlsx'


export default {
  name: 'HelloWorld',
  props: {
    type: String,
    default: '选择excel文件'
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'id',
      },
      departs: [],
      dataArr: {}, // 表格内容数据数组
      // countArr: {}, // 分析表格数据以及表头，得到一个对照数组，用来进行自定义合并，本文暂时只写基础，不介绍自动合并单元格了哟~~我的其他文章有写自定义合并实现方法~
      tableColumn: [], // 表格表头配置数组
      tableLoading: false // 表格是否loading
    }
  },
  methods: {
    // 点击上传文件事件
    btnClick() {
      document.querySelector('.input-file').click()

    },

    //  获取表格表头

    getHeader(sheet) {
      const XLSX = xlsx
      const headers = []
      const range = XLSX.utils.decode_range(sheet["!ref"]) // worksheet['!ref'] 是工作表的有效范围
      let C
      /* 获取单元格值 start in the first row */
      const R = range.s.r // 行 // C 列
      let i = 0
      for (C = range.s.c; C <= range.e.c; ++C) {
        var cell =
          sheet[
          XLSX.utils.encode_cell({ c: C, r: R })
          ] /* 根据地址得到单元格的值find the cell in the first row */
        var hdr = "UNKNOWN" + C // 如果有空表头，会替换为您想要的默认值replace with your desired default
        // XLSX.utils.format_cell 生成单元格文本值
        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
        if (hdr.indexOf('UNKNOWN') > -1) {
          if (!i) {
            hdr = '__EMPTY'
          } else {

            hdr = '__EMPTY_' + i
          }
          i++
        }
        headers.push(hdr)
      }
      return headers
    },
    delDepartTree(data) {
      const obj = {} // 重新存储数据
      const res = [] // 存储最后结果
      const len = data.length
      const id = 'id'
      const parentId = 'leaderId'
      const children = 'children'
      // 遍历原始数据data，构造obj数据，键名为id，值为数据
      for (let i = 0; i < len; i++) {
        obj[data[i][id]] = data[i]
      }
      // 遍历原始数据
      for (let j = 0; j < len; j++) {
        const list = data[j]
        // 通过每条数据的 pid 去obj中查询
        const parentList = obj[list[parentId]]
        if (parentList) {
          // 根据 pid 找到的是父节点，list是子节点，
          if (!parentList[children]) {
            parentList[children] = []
          }
          // 将子节点插入 父节点的 children 字段中
          parentList[children].push(list)
        } else {
          // pid 找不到对应值，说明是根结点，直接插到根数组中
          res.push(list)
        }
      }
      return res
    },
    // 获取表格内容
    setTable(headers, excellist) {
      // const tableTitleData = [] // 存储表格表头数据
      // const tableMapTitle = {} // 设置表格内容中英文对照用
      // headers.forEach((_, i) => {
      //   tableMapTitle[_] = "prop" + i
      //   tableTitleData.push({
      //     prop: "prop" + i,
      //     label: _,
      //     width: 100
      //   })
      // })
      // console.log("tableTitleData", tableTitleData)
      // // 映射表格内容属性名为英文
      // const newTableData = []
      // excellist.forEach(_ => {
      //   const newObj = {}
      //   Object.keys(_).forEach(key => {
      //     newObj[tableMapTitle[key]] = _[key]
      //   })
      //   newTableData.push(newObj)
      // })
      // console.log('newTableData', newTableData)
      // this.tableColumn = tableTitleData
      // this.dataArr = newTableData
      this.dataArr = this.delDepartTree(excellist) && this.delDepartTree(excellist)[0] || {}
      // this.dataArr = {
      //   id: 0,
      //   label: "XXX科技有限公司",
      //   children: [
      //     {
      //       id: 2,
      //       label: "产品研发部",
      //       children: [
      //         {
      //           id: 5,
      //           label: "研发-前端"
      //         },
      //         {
      //           id: 6,
      //           label: "研发-后端"
      //         },
      //         {
      //           id: 9,
      //           label: "UI设计"
      //         },
      //         {
      //           id: 10,
      //           label: "产品经理"
      //         }
      //       ]
      //     },
      //     {
      //       id: 3,
      //       label: "销售部",
      //       children: [
      //         {
      //           id: 7,
      //           label: "销售一部"
      //         },
      //         {
      //           id: 8,
      //           label: "销售二部"
      //         }
      //       ]
      //     },
      //     {
      //       id: 4,
      //       label: "财务部"
      //     },
      //     {
      //       id: 9,
      //       label: "HR人事"
      //     }
      //   ]
      // }
      console.log('dataArr', this.dataArr)

    },

    //  读取文件
    exportData(event) {
      if (!event.currentTarget.files.length) {
        return
      }
      const that = this
      // 拿取文件对象
      var f = event.currentTarget.files[0]
      // 用FileReader来读取
      var reader = new FileReader()
      // 重写FileReader上的readAsBinaryString方法
      FileReader.prototype.readAsBinaryString = function (f) {
        var binary = ''
        var wb // 读取完成的数据
        var outdata // 你需要的数据
        var reader = new FileReader()
        reader.onload = function (e) {
          // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
          var bytes = new Uint8Array(reader.result)
          var length = bytes.byteLength
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i])
          }
          // 接下来就是xlsx了，具体可看api
          wb = xlsx.read(binary, {
            type: 'binary'
          })
          outdata = xlsx.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
          const excellist = [] //清空接收数据
          // 自定义方法向父组件传递数据
          // console.log('outdata = ' + JSON.stringify(outdata))
          for (var i = 0; i < outdata.length; i++) {
            console.log(outdata[i])
            excellist.push(outdata[i])
          }
          console.log("读取结果", excellist)


          that.$emit('getResult', outdata)
          const a = wb.Sheets[wb.SheetNames[0]]
          const headers = that.getHeader(a)
          console.log("headers", headers)
          that.setTable(headers, excellist)
        }
        reader.readAsArrayBuffer(f)
      }
      reader.readAsBinaryString(f)
    }
  }
}
</script>
 
<style scoped>
.input-file {
  display: none;
}
</style>
 